import React from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from 'apexcharts';

interface BarChartProps {
  data: number[];
  categories: string[];
  title?: string;
  height?: number;
  horizontal?: boolean;
  color?: string;
  distributed?: boolean;
  colors?: string[];
}

const BarChart: React.FC<BarChartProps> = ({ 
  data, 
  categories, 
  title = '', 
  height = 350, 
  horizontal = false,
  color = '#6366f1',
  distributed = false,
  colors
}) => {
  const series = [{
    name: title || '数量',
    data: data
  }];

  const options: ApexOptions = {
    chart: {
      type: 'bar',
      height,
      fontFamily: 'Inter, Noto Sans SC, sans-serif',
      toolbar: { show: false },
      animations: { enabled: true, speed: 800 }
    },
    plotOptions: {
      bar: {
        borderRadius: 4,
        horizontal,
        columnWidth: horizontal ? '50%' : '50%',
        distributed
      }
    },
    dataLabels: { enabled: false },
    colors: colors || [color],
    xaxis: {
      categories,
      labels: { style: { fontSize: '12px' } }
    },
    yaxis: {
      title: { text: horizontal ? '' : '数量' },
      labels: {
        formatter: (val) => horizontal ? val.toString() : `${val}`
      }
    },
    legend: {
      show: !distributed,
      position: 'bottom',
      horizontalAlign: 'center',
      fontWeight: 500,
      offsetY: 5
    },
    tooltip: {
      y: {
        formatter: (val) => `${val}`
      }
    },
    fill: { opacity: 1 }
  };

  return (
    <ReactApexChart 
      options={options} 
      series={series} 
      type="bar" 
      height={height} 
    />
  );
};

export default BarChart; 